@use "sass:color";
@use "alchemy_admin/select2";
@use "../extends";
@use "../mixins";

select {
  @include mixins.button-defaults(
    $background-color: var(--select-background-color),
    $hover-color: var(--select-background-color),
    $hover-border-color: var(--select-hover-border-color),
    $padding: var(--spacing-1) 26px var(--spacing-1) var(--spacing-2),
    $border: 1px solid var(--select-border-color),
    $box-shadow: none,
    $color: var(--select-text-color),
    $margin: 0
  );

  & {
    height: var(--form-field-height);
    max-width: 100%;
    width: auto;
    font-weight: normal;
    vertical-align: middle;
    background-image: var(--select-background-image);
    background-position: right 0.75em center;
    background-repeat: no-repeat;
    background-size: 1em;
  }

  &.tiny {
    padding-right: 0.6em;
  }

  &.medium {
    width: var(--select-medium-width);
  }

  &.large {
    width: var(--select-large-width);
  }
}

.select2-container {
  border-radius: var(--border-radius_medium);

  &.alchemy_selectbox {
    .select2-choice {
      width: 100%;

      @include mixins.button-defaults(
        $background-color: var(--select-background-color),
        $height: var(--form-field-height),
        $hover-color: var(--select-background-color),
        $hover-border-color: var(--select-hover-border-color),
        $padding: var(--form-field-padding),
        $border: 1px solid var(--select-border-color),
        $box-shadow: none,
        $color: var(--select-text-color),
        $margin: 0
      );

      & {
        background-image: none;
        display: flex;
        gap: var(--spacing-2);
        align-items: center;
        font-weight: normal;
        text-align: left;
      }

      .select2-chosen {
        flex-grow: 1;
        margin-right: 0;
      }

      .select2-arrow {
        position: static;
        background: transparent;
        border-left: 0 none;

        b {
          display: flex;
          align-items: center;
          justify-content: center;
          background-image: none;
          color: var(--icon-color);

          &:before {
            display: inline-block;
            content: "";
            width: 1rem;
            height: 1rem;
            background: var(--select-background-image) no-repeat;
          }
        }
      }
    }

    &.medium {
      width: var(--select-medium-width);
    }

    &.large {
      width: var(--select-large-width);
    }

    &.select2-container-active {
      .select2-choice,
      .select2-choices {
        @include mixins.default-focus-style(
          $box-shadow: 0 0 0 1px var(--focus-color)
        );
      }
    }

    &.select2-container-disabled {
      .select2-choice,
      .select2-choice:hover {
        background-image: none;
        background-color: var(--select-disabled-background-color);
        box-shadow: none;
        border-color: var(--select-disabled-border-color);
        cursor: not-allowed;
        color: var(--select-disabled-text-color);

        .select2-arrow {
          border-color: var(--select-disabled-border-color);

          b {
            color: var(--text-color-muted);
          }
        }
      }
    }
  }

  &.select2-allowclear {
    .select2-search-choice-close {
      position: static;
      display: inline-flex;
      left: auto;
      right: var(--spacing-1);
      top: 5px;
      background: none;
      text-decoration: none;
      align-items: center;
      justify-content: center;
    }
  }

  &.select2-container-multi {
    margin-top: 0 !important;

    &.select2-container-active {
      .select2-choices {
        @include mixins.default-focus-style(
          $box-shadow: 0 0 0 1px var(--focus-color)
        );
      }
    }

    .select2-search-choice-close {
      position: absolute;
      left: initial;
      right: var(--spacing-1);
    }

    .select2-choices {
      @extend %default-input-style;
      padding: 0 var(--spacing-0);
      width: 100%;

      .select2-search-choice {
        display: flex;
        align-items: center;
        gap: var(--spacing-0);
        margin: var(--spacing-1);
        padding: var(--spacing-1) var(--spacing-6) var(--spacing-1)
          var(--spacing-2);
        background-image: none;
        border: 0 none;
        box-shadow: none;
        color: var(--text-color);
        background-color: var(--tag-background-color);
      }

      .select2-search-field {
        height: 29px;

        input {
          color: var(--form-field-text-color);
          padding: 3px 6px;
          margin: 0;

          &.select2-active {
            background: var(--form-field-background-color) !important;
          }
        }
      }
    }
  }

  .select2-default {
    color: var(--text-color-muted) !important;
  }

  .select2-search-choice-close {
    &:before {
      content: "";
      display: inline-flex;
      width: 12px;
      height: 12px;
      background: var(--select-close-icon) no-repeat;
    }

    &:hover {
      color: var(--icon-color);
    }
  }
}

.select2-drop {
  background: var(--select-dropdown-background-color);
  box-shadow: var(--select-dropdown-box-shadow);
  color: var(--select-dropdown-text-color, var(--text-color));
  margin-top: 1px;

  &.select2-drop-above {
    margin-top: -1px;

    &.select2-drop-active {
      border-top-color: var(--select-dropdown-border-color);
    }
  }

  .select2-search {
    margin: var(--spacing-1) 0;

    .select2-input {
      width: inherit;

      &.select2-active {
        background: var(--form-field-background-color) !important;
      }
    }
  }

  &.select2-with-searchbox .select2-results > .select2-result:first-child {
    @include mixins.border-top-radius(0);
  }

  .select2-results {
    padding: 0;
    margin: 0;

    > .select2-result:first-child {
      @include mixins.border-top-radius(var(--border-radius_medium));
    }

    > .select2-result:last-child {
      @include mixins.border-bottom-radius(var(--border-radius_medium));
    }

    .select2-result {
      margin: 0;
      padding: var(--spacing-1) 0;

      &.select2-highlighted {
        background: var(--select-hover-bg-color, var(--color-blue_dark));
        color: var(--select-hover-text-color, var(--color-white));
      }

      &.select2-result-with-children {
        padding: 0;
      }
    }

    .select2-no-results,
    .select2-searching {
      padding: var(--spacing-2);
      margin: 0;
      background: var(--select-dropdown-background-color);
    }

    .select2-result-label {
      padding: var(--spacing-1) var(--spacing-2);

      em {
        text-decoration: underline;
      }
    }

    ul.select2-result-sub > li .select2-result-label {
      padding-left: var(--spacing-4);
    }
  }

  &.select2-drop-active {
    border-radius: var(--border-radius_medium);
    border: 1px solid var(--select-dropdown-border-color);
  }

  .select2-more-results,
  .select2-ajax-error {
    padding: var(--spacing-2);
    margin-bottom: 0;
    background: var(--notice-error-background-color);
    color: var(--notice-error-text-color);
  }
}

#filter_bar {
  select,
  .select2-container {
    width: 100%;
  }
}

.select_with_label {
  display: inline-flex;
  align-items: center;
  margin: 0 var(--spacing-3);

  label,
  alchemy-icon {
    margin-right: var(--spacing-2);
  }
}

// overriding important of select2 default style for retina screens
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
  only screen and (min-resolution: 2dppx) {
  #alchemy {
    .select2-search input,
    .select2-container .select2-choice abbr,
    .select2-container .select2-choice .select2-arrow b {
      background-image: none !important;
    }
  }
}
